
<div nz-row nzType="flex" nzJustify="center" nzAlign="middle" style="background-color: #F5F5F5;height: 72px;text-align: center">
  <div nz-col class="ng-col" [nzXs]="16" [nzSm]="12" [nzMd]="8" [nzLg]="6" (click)="classic_case()" >
    <img src="../assets/imgs/logo.png" style="width: 60%;max-width: 120px" alt="Sation">
    <span style="color: #ff8800;font-size: 1.2rem;vertical-align: bottom">&nbsp;&nbsp;方案报价系统 </span>
  </div>

  <div *ngFor="let type of house_type index as i" nz-col [nzXs]="0" [nzSm]="0" [nzMd]="2" [nzLg]="2"  (click)="choose_house_type(i)" >
    <span class="house-type"><i nz-icon type="home" theme="outline"></i>&nbsp;{{type}}</span>
  </div>
  <!--<div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="2" (click)="choose_house_type()" ><i nz-icon type="home" theme="outline"></i>一室</div>-->
  <!--<div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="2"><i nz-icon type="home" theme="outline"></i>两室</div>-->
  <!--<div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="2"><i nz-icon type="home" theme="outline"></i>三室</div>-->
  <!--<div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="2"><i nz-icon type="home" theme="outline"></i>四室</div>-->
  <!--<div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="2"><i nz-icon type="bank" theme="outline"></i>别墅</div>-->
  <!--<div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="2"><i nz-icon type="bank" theme="outline"></i>酒店</div>-->
  <!--<div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="2"><i nz-icon type="bank" theme="outline"></i>公司</div>-->
  <!--<div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="2"><i nz-icon type="bank" theme="outline"></i>商场</div>-->

  <div nz-col [nzXs]="8" [nzSm]="12" [nzMd]="0">
    <nz-select style="width: 120px;" [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose">
      <nz-option *ngFor="let data of house_type" nzValue={{data}} nzLabel={{data}}></nz-option>
      <!--<nz-option nzValue="jack" nzLabel="Jack"></nz-option>-->
      <!--<nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>-->
      <!--<nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>-->
    </nz-select>
  </div>
</div>


<div [ngSwitch]="choosed_type">
  <div *ngSwitchCase="house_type[0]">
    <h2 class="case-title">{{house_type[0]}}户型项目案例</h2>
    <div nz-row style="margin: 2rem 10%">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case2.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><a href="http://localhost/case1huafa"><img src="../assets/imgs/case3.jpg" class="case-img"></a></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case4.jpg" class="case-img"></div>
    </div>
    <div nz-row style="margin: 2rem 10%;">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX酒店工程方案</h3>
        <p>
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <a href="http://localhost/case1huafa"><h3 style="font-size: 1.2rem" >华发山庄梁府智能家居设计方案</h3></a>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX公司工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
    </div>
    <div style="margin: 1rem 10%;">
      <p class="more" ><span style="cursor: pointer;">查看更多案例></span></p>
    </div>
    <div style="margin: 1rem 10%">
      <app-oneroom></app-oneroom>
    </div>
  </div>


  <div *ngSwitchCase="house_type[1]">
    <h2 class="case-title">{{house_type[1]}}户型项目案例</h2>
    <div nz-row style="margin: 2rem 10%">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case3.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case4.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case5.jpg" class="case-img"></div>
    </div>
    <div nz-row style="margin: 2rem 10%;">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX酒店工程方案</h3>
        <p>
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX家居工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX公司工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
    </div>
    <div style="margin: 1rem 10%;">
      <p class="more" ><span style="cursor: pointer;">查看更多案例></span></p>
    </div>
    <div style="margin: 1rem 10%">
      <app-tworoom></app-tworoom>
    </div>
  </div>

  <div *ngSwitchCase="house_type[2]">
    <h2 class="case-title">{{house_type[2]}}户型项目案例</h2>
    <div nz-row style="margin: 2rem 10%">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case4.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case5.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case6.jpg" class="case-img"></div>
    </div>
    <div nz-row style="margin: 2rem 10%;">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX酒店工程方案</h3>
        <p>
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX家居工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX公司工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
    </div>
    <div style="margin: 1rem 10%;">
      <p class="more" ><span style="cursor: pointer;">查看更多案例></span></p>
    </div>
    <div style="margin: 1rem 10%">
      <app-threeroom></app-threeroom>
    </div>
  </div>

  <div *ngSwitchCase="house_type[3]">
    <h2 class="case-title">{{house_type[3]}}户型项目案例</h2>
    <div nz-row style="margin: 2rem 10%">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case5.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case6.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case7.jpg" class="case-img"></div>
    </div>
    <div nz-row style="margin: 2rem 10%;">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX酒店工程方案</h3>
        <p>
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX家居工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX公司工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
    </div>
    <div style="margin: 1rem 10%;">
      <p class="more" ><span style="cursor: pointer;">查看更多案例></span></p>
    </div>
    <div style="margin: 1rem 10%">
      <app-fourroom></app-fourroom>
    </div>
  </div>

  <div *ngSwitchCase="house_type[4]">
    <h2 class="case-title">{{house_type[4]}}案例</h2>
    <div nz-row style="margin: 2rem 10%">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case6.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case7.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case8.jpg" class="case-img"></div>
    </div>
    <div nz-row style="margin: 2rem 10%;">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX酒店工程方案</h3>
        <p>
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX家居工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX公司工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
    </div>
    <div style="margin: 1rem 10%;">
      <p class="more" ><span style="cursor: pointer;">查看更多案例></span></p>
    </div>
    <div style="margin: 1rem 10%">
      <app-villa></app-villa>
    </div>
  </div>

  <div *ngSwitchCase="house_type[5]">
    <h2 class="case-title">{{house_type[5]}}案例</h2>
    <div nz-row style="margin: 2rem 10%">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case7.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case8.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case1.jpg" class="case-img"></div>
    </div>
    <div nz-row style="margin: 2rem 10%;">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX酒店工程方案</h3>
        <p>
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX家居工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX公司工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
    </div>
    <div style="margin: 1rem 10%;">
      <p class="more" ><span style="cursor: pointer;">查看更多案例></span></p>
    </div>
    <div style="margin: 1rem 10%">
      <app-hotel></app-hotel>
    </div>
  </div>

  <div *ngSwitchCase="house_type[6]">
    <h2 class="case-title">{{house_type[6]}}案例</h2>
    <div nz-row style="margin: 2rem 10%">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case2.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case4.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case6.jpg" class="case-img"></div>
    </div>
    <div nz-row style="margin: 2rem 10%;">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX酒店工程方案</h3>
        <p>
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX家居工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX公司工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
    </div>
    <div style="margin: 1rem 10%;">
      <p class="more" ><span style="cursor: pointer;">查看更多案例></span></p>
    </div>
    <div style="margin: 1rem 10%">
      <app-company></app-company>
    </div>
  </div>

  <div *ngSwitchCase="house_type[7]">
    <h2 class="case-title">{{house_type[7]}}案例</h2>
    <div nz-row style="margin: 2rem 10%">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case3.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case5.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case7.jpg" class="case-img"></div>
    </div>
    <div nz-row style="margin: 2rem 10%;">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX酒店工程方案</h3>
        <p>
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX家居工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX公司工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
    </div>
    <div style="margin: 1rem 10%;">
      <p class="more" ><span style="cursor: pointer;">查看更多案例></span></p>
    </div>
    <div style="margin: 1rem 10%">
      <app-others></app-others>
    </div>
  </div>

  <div *ngSwitchDefault>
    <h2 class="case-title">经典案例 </h2>
    <div nz-row style="margin: 2rem 10%">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case2.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case3.jpg" class="case-img"></div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8" class="case-img-div"><img src="../assets/imgs/case4.jpg" class="case-img"></div>
    </div>
    <div nz-row style="margin: 2rem 10%;">
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX酒店工程方案</h3>
        <p>
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX家居工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
      <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="8">
        <h3 style="font-size: 1.2rem">XX公司工程方案</h3>
        <p >
          方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介方案简介
        </p>
      </div>
    </div>
    <div style="margin: 1rem 10%;">
      <p class="more" ><span style="cursor: pointer;">查看更多案例></span></p>
    </div>
    <div class="introduce-div" >
      <img src="../assets/imgs/sation.png" style="margin: 2rem 0 1rem 0">
      <h2 style="font-size: 2rem;color: #ff8800">世讯科技</h2>
      <p class="introduce-p" >
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;珠海世讯科技有限公司是一家集研发、生产、销售为一体并致力于通过KNX技术实现 “健康舒适、优质生活”理念，主推KNX产品在智能建筑领域应用的高新企业。
      </p>
      <p class="introduce-p" >
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拥有自有品牌SATION的世讯科技是KNX产品制造商及解决方案提供商，拥有完整的KNX标准软硬件产品体系和完善的本地化服务体系。世讯科技的KNX标准硬件包括智能面板系列、执行器系列、通用接口模块系列、传感器系列、客房控制器系列、系统元件系列等。
      </p>
      <p style="height: 2rem">&nbsp;</p>
    </div>
  </div>

</div>

<div style="height: 120px">

</div>
